<template>
  <div>
    <nav class="navbar">
      <div class="navbar-brand">
        <a class="navbar-item" href="#">
          <img src="@/assets/images/logo.png" alt="Brand Logo" class="logo">
        </a>
        <a role="button" class="navbar-burger" @click="toggleNavbar">
          <span></span>
          <span></span>
          <span></span>
        </a>
      </div>

      <div :class="['navbar-menu', { 'is-active': isActive }]">
        <div class="navbar-start">
          <nav>
            <router-link class="navbar-item" to="/">HomePage</router-link>
            <!-- <a class="navbar-item" href="#" target="_blank">HomePage</a> -->
            <!-- 用户下拉菜单 -->
            <div class="dropdown">
              <a class="navbar-item dropbtn">User</a>
              <div class="dropdown-content">
                <router-link class="navbar-item dropdown-item" to="/userlogin">User Login</router-link>
                <router-link class="navbar-item dropdown-item" to="/userRegister">User Register</router-link>
              </div>
            </div>

            <!-- 商户下拉菜单 -->
            <div class="dropdown">
              <a class="navbar-item dropbtn">Merchant</a>
              <div class="dropdown-content">
                <router-link class="navbar-item dropdown-item" to="/sellerLogin">Merchant Login</router-link>
                <router-link class="navbar-item dropdown-item" to="/sellerRegister">Merchant Register</router-link>
              </div>
            </div>
            <router-link class="navbar-item" to="/adminLogin">AdministratorLogin</router-link>
            <!-- <a class="navbar-item" href="#" target="_blank">AdministratorLogin</a> -->
            <!-- <a class="navbar-item" href="#" target="_blank">AboutUs</a> -->
            <a class="navbar-item" href="https://gitee.com/zhang-yi-667/elegant-mall/" target="_blank">AboutUs</a>
          </nav>
        </div>
      </div>
    </nav>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  name: 'NavBar',
  setup() {
    // 控制导航栏的显示状态
    const isActive = ref(false);

    // 切换导航栏显示状态
    const toggleNavbar = () => {
      isActive.value = !isActive.value;
    };

    return {
      isActive,
      toggleNavbar,
    };
  },
};
</script>

<style scoped>
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  color: #333;
  height: 40px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 10px 20px;
  margin: 0;
}

.navbar-item {
  font-size: 18px;
  font-family: 'Arial', sans-serif;
  font-weight: 600;
  color: #333;
  text-decoration: none;
  padding: 10px 20px;
  border-radius: 5px;
  transition: all 0.3s ease;
  white-space: nowrap;
  /* 防止文字换行 */
}

.navbar-item:hover {
  color: #ffffff;
  background-color: #3498db;
  transform: scale(1.1);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.logo {
  height: 60px;
}

.navbar-burger {
  cursor: pointer;
  display: none;
}

.navbar-burger span {
  display: block;
  width: 25px;
  height: 2px;
  background-color: #333;
  margin: 4px 0;
}

.navbar-menu {
  display: flex;
}

.navbar-menu.is-active {
  display: block;
}

.navbar-start {
  display: flex;
}

/* 下拉菜单样式 */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropbtn {
  cursor: pointer;
}

.dropdown-content {
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
  z-index: 1;
  border-radius: 10px;
  /* 设置圆角 */
  overflow: hidden;
  /* 确保内容也应用圆角 */
  display: none;
  /* 默认隐藏 */
}

.dropdown:hover .dropdown-content {
  display: block;
  /* 鼠标悬停时显示 */
}

.dropdown-item {
  color: #333;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  font-size: 18px;
  font-family: 'Arial', sans-serif;
  font-weight: 600;
  transition: all 0.3s ease;
  white-space: nowrap;
  /* 防止文字换行 */
}

.dropdown-item:hover {
  color: #ffffff;
  background-color: #3498db;
  transform: scale(1.1);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
  .navbar-burger {
    display: block;
  }

  .navbar-menu {
    display: none;
    flex-direction: column;
  }

  .navbar-menu.is-active {
    display: flex;
  }

  .dropdown-content {
    position: static;
    border-radius: 0;
    /* 在小屏幕上去掉圆角 */
  }
}
</style>